<template>
  <div v-loading="loading" element-loading-text="保存中" class="shop-introduce">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-suffix="："
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="店铺图片" prop="imageList">
        <div class="img-list">
          <draggable :list="form.imageList" :options="{ filter: '.undrag' }">
            <div
              v-for="(v, i) in form.imageList"
              :key="i"
              class="img-item drag"
            >
              <img :src="v.url" alt="">
              <div class="handle-icon">
                <i class="el-icon-zoom-in icon" @click="handlePreview(v)" />
                <i class="el-icon-delete icon" @click="handleRemove(v, i)" />
              </div>
            </div>

            <div class="img-item undrag">
              <el-upload
                :limit="10"
                :action="actionUrl"
                :headers="{ 'X-BUSINESS-TOKEN': $store.state.user.token }"
                :file-list="form.imageList"
                :before-upload="handleBefore"
                :on-success="handleSuccess"
                :on-exceed="handleExceed"
                drag
                multiple
                :show-file-list="false"
                list-type="picture-card"
                class="upload-container"
              >
                <i class="el-icon-upload" />
                <div class="el-upload__text">
                  <div>将文件拖到此处，或 <em>点击上传</em></div>
                </div>
              </el-upload>
              <el-dialog title="图片预览" :visible.sync="dialogImageVisible">
                <img width="100%" :src="dialogImageUrl" alt>
              </el-dialog>
            </div>
          </draggable>
        </div>
        <div class="upload-tips">
          <div>1.只能上传jpg/png文件，且不超过1mb</div>
          <div>2.建议尺寸1000*600像素，最多上传10张</div>
          <div>3.可长按图片进行拖拽排序</div>
        </div>
      </el-form-item>
      <el-form-item label="店铺描述" prop="description">
        <el-input
          v-model.trim="form.description"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 5 }"
          maxlength="250"
          placeholder="请输入描述"
          style="width:500px"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          round
          size="small"
          @click="submit"
        >保 存</el-button>
        <el-button round size="small" @click="initData">重 置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { imgUploadUrl } from '@/api/upload'
import draggable from 'vuedraggable'
import { saveShopManageOtherConfig } from '../../../api/shop'
export default {
  components: {
    draggable
  },
  props: {
    configForm: {
      type: Object,
      require: true
    },
    tabName: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      /**
       * 表单校验字段相关
       */
      rules: {
        imageList: [
          { type: 'array', required: true, message: '请至少上传一张图片' }
        ]
      },
      // 配置
      actionUrl: imgUploadUrl,
      // 状态
      loading: false,
      dialogImageVisible: false,
      // 数据
      dialogImageUrl: '',
      form: {
        imageList: [],
        description: ''
      }
    }
  },
  watch: {
    tabName(val) {
      this.initData()
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  mounted() {
    this.initData()
  },
  methods: {
    /**
     * 获取数据
     */
    // 设置表单初始数据
    initData() {
      const configForm = Object.assign({}, this.configForm)
      this.form.description = configForm.description
      this.form.imageList = configForm.imageList
      console.log(this.form.imageList)
    },

    /**
     * 按钮组
     */
    // 保存
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const params = Object.assign({}, this.form)
          params.shopId = this.configForm.shopId
          params.imageList = params.imageList.map(v => {
            if (
              v.response &&
              v.response.code === 0 &&
              v.response.data &&
              v.response.data.path
            ) {
              return v.response.data.path
            }
          })
          params.coverUrl = params.imageList[0]
          this.loading = true
          saveShopManageOtherConfig(params)
            .then(res => {
              this.$notify({
                title: '成功',
                message: '保存成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.configForm.imageList = this.form.imageList
              this.configForm.description = this.form.description
            })
            .catch(() => {})
            .finally(() => {
              this.loading = false
            })
        }
      })
    },

    handleBefore(file) {
      return this.beforeUploadImg(file, this, 0, 0, 1)
    },

    handleSuccess(res, file, fileList) {
      if (res.code === 0) {
        fileList.map
        this.form.imageList = fileList
        this.$refs.form.clearValidate(['imageList'])
      } else {
        this.$message.error(res.msg)
      }
    },

    handleRemove(v, i) {
      this.form.imageList.splice(i, 1)
    },

    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImageVisible = true
    },

    handleExceed() {
      this.$message.error('最多上传10张')
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.shop-introduce {
  .upload-container ::v-deep {
    .el-upload-dragger {
      width: 298px;
      height: 178px;
    }
    .el-upload--picture-card {
      line-height: 1;
      width: 300px;
      height: 180px;
      border: none;
    }
    .el-upload-list__item {
      width: 300px;
      height: 180px;
    }
    .el-upload__text {
      line-height: 1.5;
    }
  }
}
/* 上传图片列表 */
.img-list {
  margin: 0;
  display: inline;
  vertical-align: top;
  cursor: pointer;
  .img-item {
    position: relative;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 180px;
    width: 300px;
    margin: 0 8px 8px 0;
    display: inline-block;
    &:hover {
      font-size: 20px;
      color: #fff;
      .handle-icon {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        .icon {
          margin: 10px;
        }
      }
    }
  }
}
</style>
